<template>
  <!-- 创建自定义产品页面 -->
  <div class="create">
    <div style="display: flex">
      <div>
        <el-form
          ref="form"
          :model="form"
          label-position="top"
          label-width="80px"
        >
          <el-form-item label="广告名称">
            <el-input v-model="form.name" size="small"></el-input>
            <el-input
              v-model="value"
              size="small"
              placeholder="搜索广告系列"
              @keyup.enter.native="getFindUserUfconsume"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="getFindUserUfconsume"
              />
            </el-input>
          </el-form-item>
          <p>可使用的自定义产品页面： 14</p>
          <div>
            <img
              src="https://img.3ydata.com/group1/M00/00/0C/wKgAD2I72vuALgXCAAJJI96epxg408.jpg"
              alt=""
              style="widht: 120px; height: 120px"
            />
            <p>标题</p>
            <p>描述</p>
          </div>
        </el-form>
      </div>
      <div>
        <img
          src="https://img.3ydata.com/group1/M00/00/0C/wKgAD2I72vuALgXCAAJJI96epxg408.jpg"
          alt=""
          style="widht: 200px; height: 200px"
        />
        <div style="display: flex">
          <p>产品页面信息</p>
          <p>查看 复制URL</p>
        </div>
        <div style="display: flex">
          <p>设备</p>
          <el-dropdown
            @command="chooseDevice"
            style="position: absolute; right: 0; margin-right: 120px"
          >
            <span class="el-dropdown-link">
              iPhone<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="iPhone">iPhone</el-dropdown-item>
              <el-dropdown-item command="iPad">iPad</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div style="display: flex">
          <p>显示类型</p>
          <el-dropdown
            @command="chooseDevice"
            style="position: absolute; right: 0; margin-right: 120px"
          >
            <span class="el-dropdown-link">
              iPhone<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="图像">图像</el-dropdown-item>
              <el-dropdown-item command="文本">文本</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div style="display: flex">
          <p>语言</p>
          <el-dropdown
            @command="chooseDevice"
            style="position: absolute; right: 0; margin-right: 120px"
          >
            <span class="el-dropdown-link">
              iPhone<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="中国">中国</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <p>如果你正在运行A/B测试，则app图标可能会与上方的概览上有所不同。</p>
        <p>评级和价格并不反映实际数值，本概览不包括预定标签。</p>
      </div>
    </div>
    <div style="margin-top: 40px">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="success" @click="dialogVisible = false">确 定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: this.createGroupShow,
      form: {},
    };
  },
  mounted() {
    console.log(this.createGroupShow);
  },
  props: {
    createGroupShow: Boolean,
  },
};
</script>
